<div class="flex justify-between items-center pb-2">
  <h2 class="text-lg  flex items-center gap-2">
    Email Providers
    <i class="pi pi-info-circle text-sky-600"
      pTooltip="Configure email-sending services like Gmail, Outlook, or custom SMTP servers for sending books via email. The default email provider will be used for 'Quick Book Send' located in the Book Card menu"
      tooltipPosition="right"
    style="cursor: pointer;"></i>
  </h2>
  <p-button outlined="true" icon="pi pi-plus" label="Create New Provider" (onClick)="openCreateProviderDialog()"></p-button>
</div>

<p-table [value]="emailProviders">
  <ng-template pTemplate="header">
    <tr>
      <th style="width: 6%;">Default</th>
      <th style="width: 10%;">Name</th>
      <th style="width: 15%;">Host</th>
      <th style="width: 6%;">Port</th>
      <th style="width: 14%;">Username</th>
      <th style="width: 12%;">Password</th>
      <th style="width: 12%;">From Address</th>
      <th style="width: 5%;">Auth</th>
      <th style="width: 5%;">StartTLS</th>
      <th style="width: 7%;">Edit</th>
      <th style="width: 8%;">Delete</th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-provider>
    <tr>
      <td class="text-center">
        <p-radioButton
          name="defaultProvider"
          [value]="provider.id"
          [(ngModel)]="defaultProviderId"
          (onClick)="setDefaultProvider(provider)">
        </p-radioButton>
      </td>

      <td>
        @if (provider.isEditing) {
          <input type="text" [(ngModel)]="provider.name" class="p-inputtext w-full"/>
        }
        @if (!provider.isEditing) {
          <span>{{ provider.name }}</span>
        }
      </td>

      <td>
        @if (provider.isEditing) {
          <input type="text" [(ngModel)]="provider.host" class="p-inputtext w-full"/>
        }
        @if (!provider.isEditing) {
          <span>{{ provider.host }}</span>
        }
      </td>

      <td>
        @if (provider.isEditing) {
          <input type="number" [(ngModel)]="provider.port" class="p-inputtext w-full"/>
        }
        @if (!provider.isEditing) {
          <span>{{ provider.port }}</span>
        }
      </td>

      <td>
        @if (provider.isEditing) {
          <input type="text" [(ngModel)]="provider.username" class="p-inputtext w-full"/>
        }
        @if (!provider.isEditing) {
          <span>{{ provider.username }}</span>
        }
      </td>

      <td>
        @if (provider.isEditing) {
          <input [(ngModel)]="provider.password" class="p-inputtext w-full"/>
        }
        @if (!provider.isEditing) {
          <span class="text-gray-400 italic">Hidden</span>
        }
      </td>

      <td>
        @if (provider.isEditing) {
          <input type="text" [(ngModel)]="provider.fromAddress" class="p-inputtext w-full"/>
        }
        @if (!provider.isEditing) {
          <span>{{ provider.fromAddress }}</span>
        }
      </td>

      <td class="text-center">
        <p-checkbox
          [(ngModel)]="provider.auth"
          [binary]="true"
          [disabled]="!provider.isEditing">
        </p-checkbox>
      </td>

      <td class="text-center">
        <p-checkbox
          [(ngModel)]="provider.startTls"
          [binary]="true"
          [disabled]="!provider.isEditing">
        </p-checkbox>
      </td>

      <td class="text-center">
        @if (!provider.isEditing) {
          <p-button icon="pi pi-pencil" outlined="true" severity="info" (onClick)="toggleEdit(provider)"></p-button>
        }
        @if (provider.isEditing) {
          <p-button icon="pi pi-check" outlined="true" severity="success" (onClick)="saveProvider(provider)"></p-button>
        }
        @if (provider.isEditing) {
          <p-button icon="pi pi-times" outlined="true" severity="danger" (onClick)="toggleEdit(provider)"></p-button>
        }
      </td>

      <td class="text-center">
        <p-button icon="pi pi-trash" outlined="true" severity="danger" (onClick)="deleteProvider(provider)"></p-button>
      </td>
    </tr>
  </ng-template>
</p-table>
